<html>
<head>
<title>Pure Shortcut for Google Bookmarks Options</title>
<link rel="stylesheet" type="text/css" href="/css/options.css" />
<script type="text/javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/js/settings.js"></script>
<script type="text/javascript">
var bkg = chrome.extension.getBackgroundPage();
// Saves options to localStorage.
function save_options() {
	bkg.settings.shortcutKeyAdd = $("shortcut_key_add").value;
	bkg.settings.shortcutKeyManage = $("shortcut_key_manage").value;
	bkg.settings.popupOnAdd = $('popup_on_add').checked;
	// Update status to let user know options were saved.
	var info = $('info-message');
	info.style.display = 'inline';
	info.style.opacity = 1;
	setTimeout(function () {
		info.style.opacity = 0.0;
	}, 1000);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
	$("shortcut_key_add").value = bkg.settings.shortcutKeyAdd;
	$("shortcut_key_manage").value = bkg.settings.shortcutKeyManage;
	$('popup_on_add').checked = bkg.settings.popupOnAdd;
}
function close_window() {
	window.close();
}
</script>
</head>
<body onload="restore_options()">
<form onsubmit="return false;">
  <div id="body-container">
    <div id="header">
      <h1>Shortcut for Google Bookmarks</h1>
    </div>
    <p>
      Make sure you save the settings after your done editing and reload all pages to activate keyboard shortcuts.
    </p>
    <div class="extension-template">
      <div class="extension-header">Keyboard Shortcuts</div>
      <div class="extension-options">
		<span>Case insensitive. Example: alt+b</span>
        <dl>
          <dt>Add bookmark:</dt>
          <dd><input type="text" id="shortcut_key_add" /></dd>
          <dt>Manage bookmarks:</dt>
          <dd><input type="text" id="shortcut_key_manage" /></dd>
        </dl>
      </div>
    </div>
	<div class="extension-template">
      <div class="extension-header">Window Behavior</div>
      <div class="extension-options">
        <dl>
          <dt>Popup when adding bookmark:</dt>
          <dd><input id="popup_on_add" type="checkbox" /></dd>
        </dl>
      </div>
    </div>
    <div id="extension-footer">
      <span id="info-message">Options saved!</span>
      <button id="button-save" onclick="save_options()">Save</button>
      <button id="button-close" onclick="close_window()">Close</button>
    </div>
	<div id="credits">
      Extension developed by <a href="http://www.answeror.com">Answeror</a>, 
      Source Code available in <a href="http://code.google.com/p/shortcut-for-google-bookmarks">Google</a>,
      Options page designed by <a href="http://www.mohamedmansour.com">Mohamed Mansour</a>
    </div>
  </div>
  </form>
</body>
</html>